<style lang="less" scoped>
.text-green{
  color: #37CA73;
}
.text-red{
  color: #EA5C5C;
}
.panel-body{
  .col-xs-12{
    margin: 5px 0;
  }
}

.xs-img {
    width: 50px;
    height: 50px;
}

.search-master {
    position: relative;
    .input-group {
        input {
            border-radius: 0;
        }
        button {
            border-radius: 0;
        }
    }
    .list-group {
        .list-group-item {
            border-radius: 0;
        }
    }
}

.search-part{
  position: relative;
  .search-result{
    // position: absolute;
    // padding:0 15px 0 15px;
    // left: 0;
    // z-index: 10;
    // width: 100%;
  }
}

</style>

<template>

<div id="adminOrderDetail">
    <div class="panel panel-default">
      <div class="panel-heading">
        订单详情
      </div>
      <div class="panel-body">
        <div class="row margin-reset">
          <div class="col-xs-12">
            <strong>订单编号：</strong>
            <span class="text-green">{{theOrder.order_no}}</span>
          </div>
          <div class="col-xs-12">
            <strong>下单时间：</strong>
            {{theOrder.new_date}}
          </div>
          <div class="col-xs-12">
            <strong>支付方式：</strong>
            支付宝
          </div>
          <div class="col-xs-12">
            <strong>订单类型：</strong>
            <span class="text-green">{{orderTypeCn(theOrder.order_type)}}</span>
          </div>
          <div class="col-xs-12">
            <strong>订单总价：</strong>
            <span class="text-green">{{theOrder.total_money}}元</span>
            <span v-if="theOrder.workflow_state == 'survey_completed'">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【<a :href="generateEditOrderAmountUrl(theOrder.id)">修改订单价</a>】
            </span>
          </div>
          <div class="col-xs-12">
            <strong>订单状态：</strong>
            <span class="text-red">{{orderStateCn(theOrder.workflow_state)}}</span>
            <span v-if="theOrder.workflow_state == 'tail_payment'">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【<a :href="generateCompleteOrderUrl(theOrder.id)" data-method="post" data-confirm='确认设置该订单状态为待安装吗？'>设置为待安装订单</a>】
            </span>
            <span v-if="theOrder.workflow_state == 'install_pending'">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【<a :href="generateCompleteOrderUrl(theOrder.id)" data-method="post" data-confirm='确认设置该订单状态为完成吗？'>设置为瓦完成订单吗</a>】
            </span>
          </div>
          <div class="col-xs-12">
            <strong>窗管家订单号：</strong>
            <span class="text-red" v-if="theOrder.chuang_order_no">{{theOrder.chuang_order_no}}</span>
            <span class="text-red" v-if="!theOrder.chuang_order_no">未生成窗管家订单</span>
          </div>
        </div>

        <br>
        <div class="row search-part" v-if="!theOrder.chuang_order_no">
            <div class="col-xs-3 search-master">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入师傅姓名或手机号码" v-model="keyword" @keyup.enter="search(keyword)">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" @click="search(keyword)">搜索</button>
                    </span>
                </div>

                <ul class="list-group search-result">
                    <li class="list-group-item" v-for="(user, index) in searchResults" :key="index">
                        {{index + 1}}.{{user.real_name}} 电话：{{user.tel}}
                        <br>
                        <button type="button" name="button" class="btn btn-sm" @click="setMaster('measure', user)">设置测量师傅</button>
                        <button type="button" name="button" class="btn btn-sm" @click="setMaster('install', user)">设置安装师傅</button>
                    </li>
                </ul>
            </div>

            <div class="col-xs-3">
                <button type="button" name="button" class="btn btn-primary btn-block" @click="submitOrder">立即生成</button>
                <div class="well" v-if="measureMaster">
                    测量师傅：{{measureMaster.real_name}}
                </div>
                <div class="well" v-if="installMaster">
                    安装师傅：{{installMaster.real_name}}
                </div>
            </div>
        </div>
      </div>
      <ul class="list-group"  v-if="theOrder.all_order_items">
        <li class="list-group-item">
          <div class="row">
            <div class="col-xs-6">
              商品详情
            </div>
            <div class="col-xs-2">
              数量
            </div>
            <div class="col-xs-2">
              单价
            </div>
            <div class="col-xs-2">
              总价
            </div>
          </div>
        </li>

        <li class="list-group-item" v-for="(orderItem, index) in theOrder.all_order_items" v-if="orderItem.item_product">
          <div class="row">
            <div class="col-xs-6">
              <a href="#">
                <img :src="orderItem.item_product.main_img_url" alt="" class="xs-img"> 产品名：{{orderItem.item_product.title}}
              </a>
            </div>
            <div class="col-xs-2">
              {{orderItem.quantity}}
            </div>
            <div class="col-xs-2">
              {{orderItem.item_product.msrp}}
            </div>
            <div class="col-xs-2">
              {{orderItem.quantity * orderItem.item_product.msrp}}
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        收货人信息
      </div>

      <div class="panel-body">
        <div class="row margin-reset">
          <div class="col-xs-12">
            <strong>联系人：</strong>
            {{theOrder.full_address.contact_name}}
          </div>
          <div class="col-xs-12">
            <strong>联系电话：</strong>
            {{theOrder.full_address.cellphone}}
          </div>
          <div class="col-xs-12">
            <strong>订单地址：</strong>
            {{theOrder.full_address.address}}  -  【<a :href="generateEditAddressUrl(theOrder.full_address.id, theOrder.id)">修改地址</a>】
          </div>
        </div>
      </div>
    </div>
</div>

</template>

<script>

import Util from '../util'
import Query from '../query'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'
import {typeFilter, stateFilter} from '../format'

export default {
    name: "adminOrderDetail",
    props: {
        order: {
            required: true,
            type: Object,
        }
    },

    data: function data() {
        return {
            theOrder: this.order,
            keyword: null,
            searchResults: [],
            measureMaster: null,
            installMaster: null,
            apiOrder: {},
        }
    },
    mounted() {
        this.initMaterial()
    },
    methods: {
        generateCompleteOrderUrl: function(id) {
          return "/admin/orders/complete_order?id="+id
        },
        generateEditAddressUrl: function(id, orderId) {
          return "/admin/addresses/" + id + "/edit?order_id=" + orderId
        },
        generateEditOrderAmountUrl: function(id) {
          return "/admin/orders/edit_total_amount?id=" + id
        },
        orderTypeCn: function(code){
          return typeFilter(code)
        },
        orderStateCn: function(code){
          return stateFilter(code)
        },
        phone: function(mobile) {
            return Util.phoneToStart(mobile)
        },
        search: function(keyword) {
            var _this = this
            Query.get('/admin/orders/search_master', {
                params: {
                    keyword: keyword
                }
            }).then((data) => {
                _this.searchResults = data.data.users
            }).catch((error) => {
                console.log(error)
            })
        },
        setMaster: function(key, user) {
            var _this = this
            switch (key) {
                case 'measure':
                    _this.measureMaster = user
                    SuccessDialog.show('测量师傅设置成功！')
                    break
                case 'install':
                    _this.installMaster = user
                    SuccessDialog.show('安装师傅设置成功！')
                    break
                default:
                    ErrorDialog.show('设置失败，请重试！')
                    break
            }
        },
        submitOrder: function() {
            var _this = this
            if (_this.measureMaster) {
                _this.apiOrder.customer_service_id = _this.measureMaster.id
                if (_this.installMaster) {
                    _this.apiOrder.facilitator_id = _this.installMaster.id
                } else {
                    _this.apiOrder.facilitator_id = null
                }
                console.log(_this.apiOrder)
                Query.post('/admin/orders/create_api_order', {
                    order: _this.apiOrder
                }).then((data) => {
                    console.log(data)
                    if (data.status === 'ok') {
                      Query.put('/admin/orders/update_api_order_no', {
                        id: _this.theOrder.id,
                        chuang_order_no: data.data.order.serial_number
                      }).then((data) => {
                          // if (data.status === 'ok' && data.data.code === 200) {
                          if (data.status === 'ok') {
                            SuccessDialog.show('生成成功')
                            _this.theOrder = data.data
                          } else {
                            ErrorDialog.show(data.data.msg)
                          }
                      })
                    } else {
                      ErrorDialog.show(data.msg)
                    }

                })
            } else {
                ErrorDialog.show('还未选择测量师傅，请重新选择！')
            }
        },
        initMaterial: function() {
            var _this = this
            Query.get('/admin/orders/search_source', {
                params: {
                    type: 'material_lib'
                }
            }).then((data) => {
                console.log('initMaterial', _this.theOrder)
                let company = data.data.company.filter((item) => {
                    return item.name === '阳毅门窗'
                })

                // console.log('theOrder', _this.theOrder)
                _this.apiOrder.company_id = company[0].id
                _this.apiOrder.material_id = data.data.material[0].id
                _this.apiOrder.material = data.data.material[0].name
                _this.apiOrder.square = 0
                _this.apiOrder.order_no = _this.theOrder.order_no
                _this.apiOrder.tel = _this.theOrder.full_address.cellphone
                _this.apiOrder.name = _this.theOrder.full_address.contact_name
                _this.apiOrder.province = _this.theOrder.full_address.province
                _this.apiOrder.city = _this.theOrder.full_address.city
                _this.apiOrder.area = _this.theOrder.full_address.district
                _this.apiOrder.street = _this.theOrder.full_address.street
                _this.apiOrder.region = 'mall'
                _this.apiOrder.total = 1
                _this.apiOrder.mount_order = false
                _this.apiOrder.booking_date = new Date().getTime() / 1000
                _this.apiOrder.remark = 'x'
                // console.log('this.apiOrder', _this.apiOrder)
            }).catch((error) => {
                console.log(error)
            })
        }
    },
}

</script>
